<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公司 OA 管理系统</title>
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <script src="https://fastly.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            display: flex;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
        }

        .sidebar {
            width: 200px;
            height: 100vh;
            background-color: #2c3e50;
            padding-top: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }

        .sidebar a {
            display: block;
            padding: 10px 20px;
            color: #ecf0f1;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        .sidebar a:hover {
            background-color: #34495e;
        }

        .sidebar a.active {
            background-color: #1abc9c;
        }

        .main-content {
            flex: 1;
            padding: 20px;
            background-color: #fff;
            margin: 10px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
            color: #2c3e50;
        }

        .btn {
            border-radius: 20px;
            transition: background-color 0.3s;
        }

        .btn-primary {
            background-color: #3498db;
            border-color: #3498db;
        }

        .btn-primary:hover {
            background-color: #2980b9;
            border-color: #2980b9;
        }

        .btn-warning {
            background-color: #f39c12;
            border-color: #f39c12;
        }

        .btn-warning:hover {
            background-color: #e67e22;
            border-color: #e67e22;
        }

        .btn-danger {
            background-color: #e74c3c;
            border-color: #e74c3c;
        }

        .btn-danger:hover {
            background-color: #c0392b;
            border-color: #c0392b;
        }

        table {
            border-radius: 5px;
            overflow: hidden;
        }

        th {
            background-color: #34495e;
            color: #ecf0f1;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
<div class="sidebar">
    <a href="#" class="active" onclick="openTab('home')">首页</a>
    <a href="#" onclick="openTab('employee')">员工管理</a>
    <a href="#" onclick="openTab('project')">项目管理</a>
    <a href="#" onclick="openTab('task')">任务管理</a>
    <a href="#" onclick="openTab('leave')">请假管理</a>
</div>
<div class="main-content">
    <div id="home" class="tab-content">
        <h2>首页</h2>
        <!-- 移除柱状图的 canvas，保留饼图的 canvas -->
        <canvas id="myPieChart" width="400" height="200"></canvas>
    </div>
    <div id="employee" class="tab-content" style="display: none;">
        <h2>员工管理</h2>
        <input type="text" id="employeeSearch" placeholder="搜索员工姓名" oninput="searchEmployees()">
        <button class="btn btn-primary" onclick="openAddEmployeeModal()">添加员工</button>
        <table id="employeeTable" class="table table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>职位</th>
                <th>部门</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div id="project" class="tab-content" style="display: none;">
        <h2>项目管理</h2>
        <input type="text" id="projectSearch" placeholder="搜索项目名称" oninput="searchProjects()">
        <button class="btn btn-primary" onclick="openAddProjectModal()">添加项目</button>
        <table id="projectTable" class="table table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>项目名称</th>
                <th>负责人</th>
                <th>开始时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div id="task" class="tab-content" style="display: none;">
        <h2>任务管理</h2>
        <input type="text" id="taskSearch" placeholder="搜索任务名称" oninput="searchTasks()">
        <button class="btn btn-primary" onclick="openAddTaskModal()">添加任务</button>
        <table id="taskTable" class="table table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>任务名称</th>
                <th>所属项目</th>
                <th>负责人</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div id="leave" class="tab-content" style="display: none;">
        <h2>请假管理</h2>
        <input type="text" id="leaveSearch" placeholder="搜索请假人姓名" oninput="searchLeaves()">
        <button class="btn btn-primary" onclick="openAddLeaveModal()">添加请假记录</button>
        <table id="leaveTable" class="table table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>请假人</th>
                <th>请假类型</th>
                <th>请假时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<!-- 员工添加/编辑模态框 -->
<div class="modal fade" id="employeeModal" tabindex="-1" aria-labelledby="employeeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="employeeModalLabel">添加/编辑员工</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="employeeId">
                <label for="employeeName">姓名</label>
                <input type="text" id="employeeName" class="form-control">
                <label for="employeePosition">职位</label>
                <input type="text" id="employeePosition" class="form-control">
                <label for="employeeDepartment">部门</label>
                <input type="text" id="employeeDepartment" class="form-control">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveEmployee()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 项目添加/编辑模态框 -->
<div class="modal fade" id="projectModal" tabindex="-1" aria-labelledby="projectModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="projectModalLabel">添加/编辑项目</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="projectId">
                <label for="projectName">项目名称</label>
                <input type="text" id="projectName" class="form-control">
                <label for="projectLeader">负责人</label>
                <input type="text" id="projectLeader" class="form-control">
                <label for="projectStartDate">开始时间</label>
                <input type="date" id="projectStartDate" class="form-control">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveProject()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 任务添加/编辑模态框 -->
<div class="modal fade" id="taskModal" tabindex="-1" aria-labelledby="taskModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="taskModalLabel">添加/编辑任务</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="taskId">
                <label for="taskName">任务名称</label>
                <input type="text" id="taskName" class="form-control">
                <label for="taskProject">所属项目</label>
                <input type="text" id="taskProject" class="form-control">
                <label for="taskLeader">负责人</label>
                <input type="text" id="taskLeader" class="form-control">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveTask()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 请假添加/编辑模态框 -->
<div class="modal fade" id="leaveModal" tabindex="-1" aria-labelledby="leaveModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="leaveModalLabel">添加/编辑请假记录</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="leaveId">
                <label for="leaveEmployee">请假人</label>
                <input type="text" id="leaveEmployee" class="form-control">
                <label for="leaveType">请假类型</label>
                <input type="text" id="leaveType" class="form-control">
                <label for="leaveDate">请假时间</label>
                <input type="date" id="leaveDate" class="form-control">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveLeave()">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 初始化表格和图表
    function init() {
        initEmployees();
        initProjects();
        initTasks();
        initLeaves();
        initChart();
    }

    // 打开 tab 页面
    function openTab(tabName) {
        let tabContents = document.querySelectorAll('.tab-content');
        tabContents.forEach(content => {
            content.style.display = 'none';
        });
        let sidebarLinks = document.querySelectorAll('.sidebar a');
        sidebarLinks.forEach(link => {
            link.classList.remove('active');
        });
        document.getElementById(tabName).style.display = 'block';
        document.querySelector(`.sidebar a[onclick="openTab('${tabName}')"]`).classList.add('active');
    }

    // 员工管理
    function initEmployees() {
        let employees = JSON.parse(localStorage.getItem('employees')) || [
            { id: 1, name: '张三', position: '开发工程师', department: '技术部' },
            { id: 2, name: '李四', position: '测试工程师', department: '测试部' },
            { id: 3, name: '王五', position: '产品经理', department: '产品部' },
            { id: 4, name: '赵六', position: '设计师', department: '设计部' },
            { id: 5, name: '孙七', position: '运营专员', department: '运营部' },
            { id: 6, name: '周八', position: '市场专员', department: '市场部' },
            { id: 7, name: '吴九', position: '客服专员', department: '客服部' },
            { id: 8, name: '郑十', position: '财务专员', department: '财务部' },
            { id: 9, name: '王十一', position: '人力资源专员', department: '人力资源部' },
            { id: 10, name: '李十二', position: '法务专员', department: '法务部' }
        ];
        localStorage.setItem('employees', JSON.stringify(employees));
        renderEmployees(employees);
    }

    function renderEmployees(employees) {
        let employeeTable = document.getElementById('employeeTable').getElementsByTagName('tbody')[0];
        employeeTable.innerHTML = '';
        employees.forEach(employee => {
            let row = employeeTable.insertRow();
            row.insertCell(0).textContent = employee.id;
            row.insertCell(1).textContent = employee.name;
            row.insertCell(2).textContent = employee.position;
            row.insertCell(3).textContent = employee.department;
            let actionsCell = row.insertCell(4);
            actionsCell.innerHTML = `<button class="btn btn-warning" onclick="openEditEmployeeModal(${employee.id})">编辑</button>
                                         <button class="btn btn-danger" onclick="deleteEmployee(${employee.id})">删除</button>`;
        });
    }

    function openAddEmployeeModal() {
        document.getElementById('employeeId').value = '';
        document.getElementById('employeeName').value = '';
        document.getElementById('employeePosition').value = '';
        document.getElementById('employeeDepartment').value = '';
        let employeeModal = new bootstrap.Modal(document.getElementById('employeeModal'));
        employeeModal.show();
    }

    function openEditEmployeeModal(id) {
        let employees = JSON.parse(localStorage.getItem('employees'));
        let employee = employees.find(e => e.id === id);
        document.getElementById('employeeId').value = employee.id;
        document.getElementById('employeeName').value = employee.name;
        document.getElementById('employeePosition').value = employee.position;
        document.getElementById('employeeDepartment').value = employee.department;
        let employeeModal = new bootstrap.Modal(document.getElementById('employeeModal'));
        employeeModal.show();
    }

    function saveEmployee() {
        let employees = JSON.parse(localStorage.getItem('employees'));
        let id = document.getElementById('employeeId').value;
        let name = document.getElementById('employeeName').value;
        let position = document.getElementById('employeePosition').value;
        let department = document.getElementById('employeeDepartment').value;
        if (id) {
            let index = employees.findIndex(e => e.id === parseInt(id));
            employees[index] = { id: parseInt(id), name, position, department };
        } else {
            let newId = employees.length > 0 ? Math.max(...employees.map(e => e.id)) + 1 : 1;
            employees.push({ id: newId, name, position, department });
        }
        localStorage.setItem('employees', JSON.stringify(employees));
        renderEmployees(employees);
        let employeeModal = bootstrap.Modal.getInstance(document.getElementById('employeeModal'));
        employeeModal.hide();
    }

    function deleteEmployee(id) {
        let employees = JSON.parse(localStorage.getItem('employees'));
        employees = employees.filter(e => e.id!== id);
        localStorage.setItem('employees', JSON.stringify(employees));
        renderEmployees(employees);
    }

    function searchEmployees() {
        let searchTerm = document.getElementById('employeeSearch').value.toLowerCase();
        let employees = JSON.parse(localStorage.getItem('employees'));
        let filteredEmployees = employees.filter(employee => employee.name.toLowerCase().includes(searchTerm));
        renderEmployees(filteredEmployees);
    }

    // 项目管理
    function initProjects() {
        let projects = JSON.parse(localStorage.getItem('projects')) || [
            { id: 1, name: '项目 A', leader: '张三', startDate: '2024-01-01' },
            { id: 2, name: '项目 B', leader: '李四', startDate: '2024-02-01' },
            { id: 3, name: '项目 C', leader: '王五', startDate: '2024-03-01' },
            { id: 4, name: '项目 D', leader: '赵六', startDate: '2024-04-01' },
            { id: 5, name: '项目 E', leader: '孙七', startDate: '2024-05-01' },
            { id: 6, name: '项目 F', leader: '周八', startDate: '2024-06-01' },
            { id: 7, name: '项目 G', leader: '吴九', startDate: '2024-07-01' },
            { id: 8, name: '项目 H', leader: '郑十', startDate: '2024-08-01' },
            { id: 9, name: '项目 I', leader: '王十一', startDate: '2024-09-01' },
            { id: 10, name: '项目 J', leader: '李十二', startDate: '2024-10-01' }
        ];
        localStorage.setItem('projects', JSON.stringify(projects));
        renderProjects(projects);
    }

    function renderProjects(projects) {
        let projectTable = document.getElementById('projectTable').getElementsByTagName('tbody')[0];
        projectTable.innerHTML = '';
        projects.forEach(project => {
            let row = projectTable.insertRow();
            row.insertCell(0).textContent = project.id;
            row.insertCell(1).textContent = project.name;
            row.insertCell(2).textContent = project.leader;
            row.insertCell(3).textContent = project.startDate;
            let actionsCell = row.insertCell(4);
            actionsCell.innerHTML = `<button class="btn btn-warning" onclick="openEditProjectModal(${project.id})">编辑</button>
                                         <button class="btn btn-danger" onclick="deleteProject(${project.id})">删除</button>`;
        });
    }

    function openAddProjectModal() {
        document.getElementById('projectId').value = '';
        document.getElementById('projectName').value = '';
        document.getElementById('projectLeader').value = '';
        document.getElementById('projectStartDate').value = '';
        let projectModal = new bootstrap.Modal(document.getElementById('projectModal'));
        projectModal.show();
    }

    function openEditProjectModal(id) {
        let projects = JSON.parse(localStorage.getItem('projects'));
        let project = projects.find(p => p.id === id);
        document.getElementById('projectId').value = project.id;
        document.getElementById('projectName').value = project.name;
        document.getElementById('projectLeader').value = project.leader;
        document.getElementById('projectStartDate').value = project.startDate;
        let projectModal = new bootstrap.Modal(document.getElementById('projectModal'));
        projectModal.show();
    }

    function saveProject() {
        let projects = JSON.parse(localStorage.getItem('projects'));
        let id = document.getElementById('projectId').value;
        let name = document.getElementById('projectName').value;
        let leader = document.getElementById('projectLeader').value;
        let startDate = document.getElementById('projectStartDate').value;
        if (id) {
            let index = projects.findIndex(p => p.id === parseInt(id));
            projects[index] = { id: parseInt(id), name, leader, startDate };
        } else {
            let newId = projects.length > 0 ? Math.max(...projects.map(p => p.id)) + 1 : 1;
            projects.push({ id: newId, name, leader, startDate });
        }
        localStorage.setItem('projects', JSON.stringify(projects));
        renderProjects(projects);
        let projectModal = bootstrap.Modal.getInstance(document.getElementById('projectModal'));
        projectModal.hide();
    }

    function deleteProject(id) {
        let projects = JSON.parse(localStorage.getItem('projects'));
        projects = projects.filter(p => p.id!== id);
        localStorage.setItem('projects', JSON.stringify(projects));
        renderProjects(projects);
    }

    function searchProjects() {
        let searchTerm = document.getElementById('projectSearch').value.toLowerCase();
        let projects = JSON.parse(localStorage.getItem('projects'));
        let filteredProjects = projects.filter(project => project.name.toLowerCase().includes(searchTerm));
        renderProjects(filteredProjects);
    }

    // 任务管理
    function initTasks() {
        let tasks = JSON.parse(localStorage.getItem('tasks')) || [
            { id: 1, name: '任务 A', project: '项目 A', leader: '张三' },
            { id: 2, name: '任务 B', project: '项目 B', leader: '李四' },
            { id: 3, name: '任务 C', project: '项目 C', leader: '王五' },
            { id: 4, name: '任务 D', project: '项目 D', leader: '赵六' },
            { id: 5, name: '任务 E', project: '项目 E', leader: '孙七' },
            { id: 6, name: '任务 F', project: '项目 F', leader: '周八' },
            { id: 7, name: '任务 G', project: '项目 G', leader: '吴九' },
            { id: 8, name: '任务 H', project: '项目 H', leader: '郑十' },
            { id: 9, name: '任务 I', project: '项目 I', leader: '王十一' },
            { id: 10, name: '任务 J', project: '项目 J', leader: '李十二' }
        ];
        localStorage.setItem('tasks', JSON.stringify(tasks));
        renderTasks(tasks);
    }

    function renderTasks(tasks) {
        let taskTable = document.getElementById('taskTable').getElementsByTagName('tbody')[0];
        taskTable.innerHTML = '';
        tasks.forEach(task => {
            let row = taskTable.insertRow();
            row.insertCell(0).textContent = task.id;
            row.insertCell(1).textContent = task.name;
            row.insertCell(2).textContent = task.project;
            row.insertCell(3).textContent = task.leader;
            let actionsCell = row.insertCell(4);
            actionsCell.innerHTML = `<button class="btn btn-warning" onclick="openEditTaskModal(${task.id})">编辑</button>
                                         <button class="btn btn-danger" onclick="deleteTask(${task.id})">删除</button>`;
        });
    }

    function openAddTaskModal() {
        document.getElementById('taskId').value = '';
        document.getElementById('taskName').value = '';
        document.getElementById('taskProject').value = '';
        document.getElementById('taskLeader').value = '';
        let taskModal = new bootstrap.Modal(document.getElementById('taskModal'));
        taskModal.show();
    }

    function openEditTaskModal(id) {
        let tasks = JSON.parse(localStorage.getItem('tasks'));
        let task = tasks.find(t => t.id === id);
        document.getElementById('taskId').value = task.id;
        document.getElementById('taskName').value = task.name;
        document.getElementById('taskProject').value = task.project;
        document.getElementById('taskLeader').value = task.leader;
        let taskModal = new bootstrap.Modal(document.getElementById('taskModal'));
        taskModal.show();
    }

    function saveTask() {
        let tasks = JSON.parse(localStorage.getItem('tasks'));
        let id = document.getElementById('taskId').value;
        let name = document.getElementById('taskName').value;
        let project = document.getElementById('taskProject').value;
        let leader = document.getElementById('taskLeader').value;
        if (id) {
            let index = tasks.findIndex(t => t.id === parseInt(id));
            tasks[index] = { id: parseInt(id), name, project, leader };
        } else {
            let newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 1;
            tasks.push({ id: newId, name, project, leader });
        }
        localStorage.setItem('tasks', JSON.stringify(tasks));
        renderTasks(tasks);
        let taskModal = bootstrap.Modal.getInstance(document.getElementById('taskModal'));
        taskModal.hide();
    }

    function deleteTask(id) {
        let tasks = JSON.parse(localStorage.getItem('tasks'));
        tasks = tasks.filter(t => t.id!== id);
        localStorage.setItem('tasks', JSON.stringify(tasks));
        renderTasks(tasks);
    }

    function searchTasks() {
        let searchTerm = document.getElementById('taskSearch').value.toLowerCase();
        let tasks = JSON.parse(localStorage.getItem('tasks'));
        let filteredTasks = tasks.filter(task => task.name.toLowerCase().includes(searchTerm));
        renderTasks(filteredTasks);
    }

    // 请假管理
    function initLeaves() {
        let leaves = JSON.parse(localStorage.getItem('leaves')) || [
            { id: 1, employee: '张三', type: '年假', date: '2024-01-05' },
            { id: 2, employee: '李四', type: '病假', date: '2024-02-10' },
            { id: 3, employee: '王五', type: '事假', date: '2024-03-15' },
            { id: 4, employee: '赵六', type: '年假', date: '2024-04-20' },
            { id: 5, employee: '孙七', type: '病假', date: '2024-05-25' },
            { id: 6, employee: '周八', type: '事假', date: '2024-06-30' },
            { id: 7, employee: '吴九', type: '年假', date: '2024-07-05' },
            { id: 8, employee: '郑十', type: '病假', date: '2024-08-10' },
            { id: 9, employee: '王十一', type: '事假', date: '2024-09-15' },
            { id: 10, employee: '李十二', type: '年假', date: '2024-10-20' }
        ];
        localStorage.setItem('leaves', JSON.stringify(leaves));
        renderLeaves(leaves);
    }

    function renderLeaves(leaves) {
        let leaveTable = document.getElementById('leaveTable').getElementsByTagName('tbody')[0];
        leaveTable.innerHTML = '';
        leaves.forEach(leave => {
            let row = leaveTable.insertRow();
            row.insertCell(0).textContent = leave.id;
            row.insertCell(1).textContent = leave.employee;
            row.insertCell(2).textContent = leave.type;
            row.insertCell(3).textContent = leave.date;
            let actionsCell = row.insertCell(4);
            actionsCell.innerHTML = `<button class="btn btn-warning" onclick="openEditLeaveModal(${leave.id})">编辑</button>
                                         <button class="btn btn-danger" onclick="deleteLeave(${leave.id})">删除</button>`;
        });
    }

    function openAddLeaveModal() {
        document.getElementById('leaveId').value = '';
        document.getElementById('leaveEmployee').value = '';
        document.getElementById('leaveType').value = '';
        document.getElementById('leaveDate').value = '';
        let leaveModal = new bootstrap.Modal(document.getElementById('leaveModal'));
        leaveModal.show();
    }

    function openEditLeaveModal(id) {
        let leaves = JSON.parse(localStorage.getItem('leaves'));
        let leave = leaves.find(l => l.id === id);
        document.getElementById('leaveId').value = leave.id;
        document.getElementById('leaveEmployee').value = leave.employee;
        document.getElementById('leaveType').value = leave.type;
        document.getElementById('leaveDate').value = leave.date;
        let leaveModal = new bootstrap.Modal(document.getElementById('leaveModal'));
        leaveModal.show();
    }

    function saveLeave() {
        let leaves = JSON.parse(localStorage.getItem('leaves'));
        let id = document.getElementById('leaveId').value;
        let employee = document.getElementById('leaveEmployee').value;
        let type = document.getElementById('leaveType').value;
        let date = document.getElementById('leaveDate').value;
        if (id) {
            let index = leaves.findIndex(l => l.id === parseInt(id));
            leaves[index] = { id: parseInt(id), employee, type, date };
        } else {
            let newId = leaves.length > 0 ? Math.max(...leaves.map(l => l.id)) + 1 : 1;
            leaves.push({ id: newId, employee, type, date });
        }
        localStorage.setItem('leaves', JSON.stringify(leaves));
        renderLeaves(leaves);
        let leaveModal = bootstrap.Modal.getInstance(document.getElementById('leaveModal'));
        leaveModal.hide();
    }

    function deleteLeave(id) {
        let leaves = JSON.parse(localStorage.getItem('leaves'));
        leaves = leaves.filter(l => l.id!== id);
        localStorage.setItem('leaves', JSON.stringify(leaves));
        renderLeaves(leaves);
    }

    function searchLeaves() {
        let searchTerm = document.getElementById('leaveSearch').value.toLowerCase();
        let leaves = JSON.parse(localStorage.getItem('leaves'));
        let filteredLeaves = leaves.filter(leave => leave.employee.toLowerCase().includes(searchTerm));
        renderLeaves(filteredLeaves);
    }

    // 初始化图表
    function initChart() {
        // 初始化饼图
        let ctxPie = document.getElementById('myPieChart').getContext('2d');
        let employees = JSON.parse(localStorage.getItem('employees')).length;
        let projects = JSON.parse(localStorage.getItem('projects')).length;
        let tasks = JSON.parse(localStorage.getItem('tasks')).length;
        let leaves = JSON.parse(localStorage.getItem('leaves')).length;
        new Chart(ctxPie, {
            type: 'pie',
            data: {
                labels: ['员工数量', '项目数量', '任务数量', '请假记录数量'],
                datasets: [{
                    label: '数据统计',
                    data: [employees, projects, tasks, leaves],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 205, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 205, 86, 1)',
                        'rgba(75, 192, 192, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {}
        });
    }

    // 页面加载完成后初始化
    window.onload = function () {
        init();
    };
</script>
</body>

</html>